<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>南讯软件-2017实时数据播报</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="data-main">
  <!-- 头部结构 -->
  <div class="data-header">
        <span class="data-title">
          <a href="/">
            <img alt="ECRP" src="">
          </a>销售情况实时播报
        </span>
    <span class="pull-right data-time">更新时间：2017-12-12 10:19:23</span>
  </div>
  <!-- 头部结构-结束 -->
  <!-- 交易额 -->
  <div class="data-info">
    <span>今日交易额</span>
    <div class="amount-main">
      <em>¥</em>
      <div class="price-div">
        <div class="h-bl number" style="display: none;"></div>
        <div class="t-bl number"></div>
        <div class="comma sign">,</div>
        <div class="bl number"></div>
        <div class="t-ml number"></div>
        <div class="ml number"></div>
        <div class="comma sign">,</div>
        <div class="h-k number"></div>
        <div class="t-k number"></div>
        <div class="k number"></div>
        <div class="comma sign">,</div>
        <div class="h number"></div>
        <div class="t number"></div>
        <div class="single number"></div>
        <div class="sign dot">.</div>
        <div class="t-d number"></div>
        <div class="h-d number"></div>
      </div>
    </div>
    <span>今日订单数：23456</span>
  </div>
  <!-- 交易额-结束 -->
  <!-- 头部结构-结束 -->
  <div class="data-content">
    <!-- 店铺销售排行结构 -->
    <div class="pull-left data-list">
      <h4 class="data-list-title">店铺销售排行</h4>
      <ul>
        <li><span class="ranking-index">1</span><span class="ranking-title">店铺名称1</span><span class="ranking-sum">¥734,128,888.00</span></li>
        <li><span class="ranking-index">2</span><span class="ranking-title">店铺名称2</span><span class="ranking-sum">¥734,128,888.00</span></li>
        <li><span class="ranking-index">3</span><span class="ranking-title">店铺名称3</span><span class="ranking-sum">¥34,128,888.00</span></li>
        <li><span class="ranking-index">4</span><span class="ranking-title">店铺名称4</span><span class="ranking-sum">¥4,128,888.00</span></li>
        <li><span class="ranking-index">5</span><span class="ranking-title">店铺名称5</span><span class="ranking-sum">¥128,888.00</span></li>
        <li><span class="ranking-index">6</span><span class="ranking-title">店铺名称6</span><span class="ranking-sum">¥128,888.00</span></li>
        <li><span class="ranking-index">7</span><span class="ranking-title">店铺名称7</span><span class="ranking-sum">¥128,888.00</span></li>
        <li><span class="ranking-index">8</span><span class="ranking-title">店铺名称8</span><span class="ranking-sum">¥128,888.00</span></li>
        <li><span class="ranking-index">9</span><span class="ranking-title">店铺名称9</span><span class="ranking-sum">¥128,888.00</span></li>
        <li><span class="ranking-index">10</span><span class="ranking-title">店铺名称10</span><span class="ranking-sum">¥128,888.00</span></li>
      </ul>
    </div>
    <!-- 店铺销售排行结构-结束 -->
    <!-- 商品销售排行 -->
    <div class="pull-right data-list">
      <h4 class="data-list-title">商品销售排行</h4>
      <ul>
        <li><span class="ranking-index">1</span><span class="ranking-title">海尔官方旗舰店</span><span class="ranking-sum">¥734,128,888.00</span></li>
        <li><span class="ranking-index">2</span><span class="ranking-title">海尔自营店</span><span class="ranking-sum">¥734,128,888.00</span></li>
        <li><span class="ranking-index">3</span><span class="ranking-title">海尔定制家居旗舰店-天津</span><span class="ranking-sum">¥34,128,888.00</span></li>
        <li><span class="ranking-index">4</span><span class="ranking-title">海尔洗衣机旗舰店</span><span class="ranking-sum">¥4,128,888.00</span></li>
        <li><span class="ranking-index">5</span><span class="ranking-title">海尔中央空调旗舰店</span><span class="ranking-sum">¥128,888.00</span></li>
        <li><span class="ranking-index">6</span><span class="ranking-title">上海世博店</span><span class="ranking-sum">¥128,888.00</span></li>
        <li><span class="ranking-index">7</span><span class="ranking-title">南京玄武湖店</span><span class="ranking-sum">¥128,888.00</span></li>
        <li><span class="ranking-index">8</span><span class="ranking-title">杭州九堡店</span><span class="ranking-sum">¥128,888.00</span></li>
        <li><span class="ranking-index">9</span><span class="ranking-title">杭州下沙店</span><span class="ranking-sum">¥128,888.00</span></li>
        <li><span class="ranking-index">10</span><span class="ranking-title">上海龙之梦店</span><span class="ranking-sum">¥128,888.00</span></li>
      </ul>
    </div>
    <!-- 商品销售排行-结束 -->
    <div class="canvas-main" id="canvas"></div>
  </div>
</div>
</body>
<script type="text/javascript" src="/dll/js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.animateToPrice.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/china.js"></script>
<script type="text/javascript">
  /* 城市地址经纬度（无用，可作为坐标参考） */
  var geoCoordMap = {
    '上海': [121.4648,31.2891],
    '东莞': [113.8953,22.901],
    '东营': [118.7073,37.5513],
    '中山': [113.4229,22.478],
    '临汾': [111.4783,36.1615],
    '临沂': [118.3118,35.2936],
    '丹东': [124.541,40.4242],
    '丽水': [119.5642,28.1854],
    '乌鲁木齐': [87.9236,43.5883],
    '佛山': [112.8955,23.1097],
    '保定': [115.0488,39.0948],
    '兰州': [103.5901,36.3043],
    '包头': [110.3467,41.4899],
    '北京': [116.4551,40.2539],
    '北海': [109.314,21.6211],
    '南京': [118.8062,31.9208],
    '南宁': [108.479,23.1152],
    '南昌': [116.0046,28.6633],
    '南通': [121.1023,32.1625],
    '厦门': [118.1689,24.6478],
    '台州': [121.1353,28.6688],
    '合肥': [117.29,32.0581],
    '呼和浩特': [111.4124,40.4901],
    '咸阳': [108.4131,34.8706],
    '哈尔滨': [127.9688,45.368],
    '唐山': [118.4766,39.6826],
    '嘉兴': [120.9155,30.6354],
    '大同': [113.7854,39.8035],
    '大连': [122.2229,39.4409],
    '天津': [117.4219,39.4189],
    '太原': [112.3352,37.9413],
    '威海': [121.9482,37.1393],
    '宁波': [121.5967,29.6466],
    '宝鸡': [107.1826,34.3433],
    '宿迁': [118.5535,33.7775],
    '常州': [119.4543,31.5582],
    '广州': [113.5107,23.2196],
    '廊坊': [116.521,39.0509],
    '延安': [109.1052,36.4252],
    '张家口': [115.1477,40.8527],
    '徐州': [117.5208,34.3268],
    '德州': [116.6858,37.2107],
    '惠州': [114.6204,23.1647],
    '成都': [103.9526,30.7617],
    '扬州': [119.4653,32.8162],
    '承德': [117.5757,41.4075],
    '拉萨': [91.1865,30.1465],
    '无锡': [120.3442,31.5527],
    '日照': [119.2786,35.5023],
    '昆明': [102.9199,25.4663],
    '杭州': [119.5313,29.8773],
    '枣庄': [117.323,34.8926],
    '柳州': [109.3799,24.9774],
    '株洲': [113.5327,27.0319],
    '武汉': [114.3896,30.6628],
    '汕头': [117.1692,23.3405],
    '江门': [112.6318,22.1484],
    '沈阳': [123.1238,42.1216],
    '沧州': [116.8286,38.2104],
    '河源': [114.917,23.9722],
    '泉州': [118.3228,25.1147],
    '泰安': [117.0264,36.0516],
    '泰州': [120.0586,32.5525],
    '济南': [117.1582,36.8701],
    '济宁': [116.8286,35.3375],
    '海口': [110.3893,19.8516],
    '淄博': [118.0371,36.6064],
    '淮安': [118.927,33.4039],
    '深圳': [114.5435,22.5439],
    '清远': [112.9175,24.3292],
    '温州': [120.498,27.8119],
    '渭南': [109.7864,35.0299],
    '湖州': [119.8608,30.7782],
    '湘潭': [112.5439,27.7075],
    '滨州': [117.8174,37.4963],
    '潍坊': [119.0918,36.524],
    '烟台': [120.7397,37.5128],
    '玉溪': [101.9312,23.8898],
    '珠海': [113.7305,22.1155],
    '盐城': [120.2234,33.5577],
    '盘锦': [121.9482,41.0449],
    '石家庄': [114.4995,38.1006],
    '福州': [119.4543,25.9222],
    '秦皇岛': [119.2126,40.0232],
    '绍兴': [120.564,29.7565],
    '聊城': [115.9167,36.4032],
    '肇庆': [112.1265,23.5822],
    '舟山': [122.2559,30.2234],
    '苏州': [120.6519,31.3989],
    '莱芜': [117.6526,36.2714],
    '菏泽': [115.6201,35.2057],
    '营口': [122.4316,40.4297],
    '葫芦岛': [120.1575,40.578],
    '衡水': [115.8838,37.7161],
    '衢州': [118.6853,28.8666],
    '西宁': [101.4038,36.8207],
    '西安': [109.1162,34.2004],
    '贵阳': [106.6992,26.7682],
    '连云港': [119.1248,34.552],
    '邢台': [114.8071,37.2821],
    '邯郸': [114.4775,36.535],
    '郑州': [113.4668,34.6234],
    '鄂尔多斯': [108.9734,39.2487],
    '重庆': [107.7539,30.1904],
    '金华': [120.0037,29.1028],
    '铜川': [109.0393,35.1947],
    '银川': [106.3586,38.1775],
    '镇江': [119.4763,31.9702],
    '长春': [125.8154,44.2584],
    '长沙': [113.0823,28.2568],
    '长治': [112.8625,36.4746],
    '阳泉': [113.4778,38.0951],
    '青岛': [120.4651,36.3373],
    '韶关': [113.7964,24.7028]
  };

  /* 动画点数据 */
  var Data = [
      /* value 第一二值为经纬度，第三个值为销售总金额， nameTitle 为 具体的收获地址， number为订单编号 */
    {name:'北京',value:[116.4551,40.2539, 11111], nameTitle: '北京朝阳区', number: 'a'},
    {name:'东莞',value:[113.8953,22.901, 22222], nameTitle: '东莞东莞东莞', number: 'b'},
    {name:'东营',value:[118.7073,37.5513, 33333], nameTitle: '东营东营东营', number: 'c'},
    {name:'中山',value:[113.4229,22.478, 44444], nameTitle: '中山中山中山', number: 'd'},
    {name:'上海',value:[121.4648,31.2891, 55555], nameTitle: '上海普陀区', number: 'e'}
  ];

  var series = [];

  /* 跳动点配置函数 */
  function dataFun (data) {
    series.unshift(
      {
        name: '动画点',
        type: 'scatter',
        coordinateSystem: 'geo',
        rippleEffect: {//涟漪特效
          scale: 0 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: false,
          }
        },
        symbol: 'image://',
        symbolSize:40,
        itemStyle: {
          normal: {
            borderWidth:2,
            borderColor:'#d64748',
            color: '#d64748',
            label: {
              show: false
            }
          },
          emphasis: {                 // 也是选中样式
            borderWidth: 1,
            borderColor: '#0c1f40',
            color: '#d64748',
            label: {
              show: false
            }
          }
        },
        data: data
      }
    );
  }

  /* 添加背景颜色值域数据 */
  function pushData () {
    series.push({
      name: '订单金额',
      type: 'map',
      mapType: 'china',
      mapLocation: {
        x : 'center',
        y : 'center'
      },
      selectedMode: 'single',
      itemStyle: {
        normal: {
          borderWidth:1,
          borderColor:'#0c1f40',
          label: {
            show: false
          }
        },
        emphasis: {                 // 也是选中样式
          borderWidth:1,
          borderColor:'#0c1f40',
          areaColor: '#d64748',
          label: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        }
      },
      data:[
        {name: '北京', value: 100000000, totalOrder: 1111181},
        {name: '上海',value: 40100000, totalOrder: 172311111},
        {name: '天津',value: 400001, totalOrder: 1111511},
        {name: '重庆',value: 40001, totalOrder: 111111},
        {name: '河北',value: 40000001, totalOrder: 11131111},
        {name: '河南',value: 400000100, totalOrder: 1111111},
        {name: '云南',value: Math.round(Math.random()*100000), totalOrder: 111111},
        {name: '辽宁',value: Math.round(Math.random()*100000), totalOrder: 1111011},
        {name: '黑龙江',value: 4000001, totalOrder: 111111},
        {name: '湖南',value: Math.round(Math.random()*100000), totalOrder: 1118111},
        {name: '安徽',value: Math.round(Math.random()*100000), totalOrder: 1119111},
        {name: '山东',value: Math.round(Math.random()*100000), totalOrder: 111111},
        {name: '新疆',value: Math.round(Math.random()*100000), totalOrder: 1111511},
        {name: '江苏',value: 10000001, totalOrder: 1111161},
        {name: '浙江',value: 10000001, totalOrder: 1111711},
        {name: '江西',value: Math.round(Math.random()*100000), totalOrder: 1114111},
        {name: '湖北',value: Math.round(Math.random()*100000), totalOrder: 111111},
        {name: '广西',value: Math.round(Math.random()*100000), totalOrder: 111311231},
        {name: '甘肃',value: Math.round(Math.random()*100000), totalOrder: 1111111},
        {name: '山西',value: Math.round(Math.random()*100000), totalOrder: 11111},
        {name: '内蒙古',value: Math.round(Math.random()*100000), totalOrder: 111111},
        {name: '陕西',value: Math.round(Math.random()*100000), totalOrder: 1111111},
        {name: '吉林',value: Math.round(Math.random()*100000), totalOrder: 11111},
        {name: '福建',value: Math.round(Math.random()*100000), totalOrder: 11111111},
        {name: '贵州',value: Math.round(Math.random()*100000), totalOrder: 111111},
        {name: '广东',value: 10000001, totalOrder: 111111},
        {name: '青海',value: Math.round(Math.random()*100000), totalOrder: 111111},
        {name: '西藏',value: Math.round(Math.random()*100000), totalOrder: 11111},
        {name: '四川',value: Math.round(Math.random()*1000000), totalOrder: 11111},
        {name: '宁夏',value: Math.round(Math.random()*100000), totalOrder: 1111211},
        {name: '海南',value: Math.round(Math.random()*1000000), totalOrder: 11111},
        {name: '台湾',value: Math.round(Math.random()*1000000), totalOrder: 11111},
        {name: '香港',value: Math.round(Math.random()*100000), totalOrder: 11111},
        {name: '南海诸岛',value: Math.round(Math.random()*100000), totalOrder: 115111},
        {name: '澳门',value: Math.round(Math.random()*1000000), totalOrder: 111711}
      ]
    });
  }
  pushData();

  var myChart = echarts.init(document.getElementById('canvas'));
  var option = {
    tooltip : {
      trigger: 'item',
      showDelay: 0,
      hideDelay: 0,
      enterable:true,
      transitionDuration:0,
      backgroundColor : 'rgba(7,20,45,0.8)',
      borderColor : '#0f55ae',
      borderWidth: 1,
      formatter : function(params, ticket, callback) {
        var res = "";
        /* 根据数据类型判断获取数据的方式 */
//          console.log(params.data.nameTitle);
        if(params.data.nameTitle) {
          var name = params.data.nameTitle;
          var value = params.data.value[2];
          var number = params.data.number;
          res = "<span>订单金额：¥" + value + "</span></span><br/><span>订单编号：" + number + "</span><br/><span>收获地址：" + name + "</span>";
        } else {
          var name = params.name;
          var value = params.value;
          var total = params.data.totalOrder;
          res = name + "<br/><span>总销售额：" + value + "</span><br/>总订单量：" + total;
        }
        return res;
      }
    },
    /* 色板 */
    dataRange: {
      show: false,
      x: 'left',
      y: 'bottom',
      textStyle: {
        color: '#fff'
      },
      splitList: [
        {start: 10000000, label: '>1000万', color: 'rgba(16, 109, 221, 1)'},
        {start: 5000000, end: 10000000, label: '500万-1000万', color: 'rgba(16, 109, 221, .85)'},
        {start: 1000000, end: 5000000, label: '100万-500万', color: 'rgba(16, 109, 221, .70)'},
        {start: 100000, end: 1000000, label: '10万-100万', color: 'rgba(16, 109, 221, .55)'},
        {start: 10000, end: 100000, label: '1-10万', color: 'rgba(16, 109, 221, .40)'},
        {start: 0, end: 10000, label: '0-1万', color: 'rgba(16, 109, 221, .25)'}
      ],
    },

    geo: {
      map: 'china',
      label: {
        emphasis: {
          show: true
        }
      },
      itemStyle: {
        normal: {
          color: 'rgba(7,20,45,0.8)', //地图背景色
          borderColor: '#0f55ae' //省市边界线
        },
        emphasis: {
          label: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        }
      }
    },
    series: series
  };
  myChart.setOption(option);
  /* 图表自适应 */
  window.onresize = myChart.resize;

  //让圆环的提示框自动触发轮播显示
  function autoHoverTip(i){
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 1,
      dataIndex: i
    });
  }

  var showTipI = 0; // 当前圆环下标
  var timers;
  var dataList = [];
  dataList.push(Data[0]);
  dataFun(dataList);
  myChart.setOption(option);
  autoHoverTip(0);
  showTipI ++;
  ad();
  /* 计时器函数 */
  function ad () {
    timers = setInterval(function(){
      myChart.dispatchAction({
        type: 'hideTip',
      });
      if (showTipI >= Data.length) {
        showTipI = 0;
      }
      option.series[0].data = [];
      option.series[0].data.push(Data[showTipI]);
      myChart.setOption(option);
      autoHoverTip(0);
      showTipI ++;
    }, 3000)
  }

  myChart.on('mouseover', function () {
    // 鼠标移入时清除计时器
    window.clearInterval(timers)
  });
  myChart.on('mouseout', function () {
    window.clearInterval(timers);
    // 鼠标移除时，继续之前的动画效果
    ad();
  });

  // 今日交易额
  function GetTradeTotal(aaa) {
    /* 超过百亿时显示百亿位数 */
    if(aaa > 9999999999){
      $(".price-div .h-bl").show();
    } else {
      $(".price-div .h-bl").hide();
    }
    $.animateToPrice(aaa);
  }
  GetTradeTotal(1415218125);
  $(window).resize(function() {
    GetTradeTotal(1415218125);
  });
</script>
</html>
